<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="app">
       <h1>生命周期</h1>
       <h1>{{ msg }}</h1>
       <button @click="change()">点击按钮</button>
    </div>
    <script src="/js/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
               msg: 'hello vue!'
            },
            methods: {
                change() {
                    this.msg = '你好';
                }
            },
            beforeCreate() {
                // 在实例创建之前执行，此时 data, methods, computed 等选项还没有初始化
                console.log('创建前');
                console.log(this.msg);
                console.log(this.$el);
            },
            created() {
                // 在实例创建之后执行，此时 data, methods, computed 等选项已经初始化，
                //但是还没有挂载到 DOM 上
                console.log('创建后');
                console.log(this.msg);
                console.log(this.$el);
            },
            beforeMount() {
                // 在实例挂载到 DOM 之前执行，此时可以访问模板中的元素，但是还没有渲染
                console.log('挂载前');
                console.log(this.msg);
                console.log(this.$el);
            },
            mounted() { // 修正了拼写错误
                // 在实例挂载到 DOM 之后执行，此时可以访问模板中的元素，并且已经渲染
                console.log('挂载后');
                console.log(this.msg);
                console.log(this.$el);
            },
            beforeUpdate() {
                // 在实例数据更新之前执行，此时可以获取旧的数据和 DOM，但是还没有重新渲染
                console.log('更新前');
                console.log(this.msg);
                console.log(this.$el);
            },
            updated() {
                // 在实例数据更新之后执行，此时可以获取新的数据和 DOM，并且已经重新渲染
                console.log('更新后');
                console.log(this.msg);
                console.log(this.$el);
            },
            beforeDestroy() { // 添加了销毁前的钩子
                // 在实例销毁之前执行，此时实例还可以正常使用，但是即将被移除
                console.log('销毁前');
                console.log(this.msg);
                console.log(this.$el);
                // 在这里你可以做一些清理操作，比如移除事件监听器，取消定时器等
            },
            destroyed() { // 添加了销毁后的钩子
                // 在实例销毁之后执行，此时实例已经被移除，无法再使用
                console.log('销毁后');
                console.log(this.msg);
                console.log(this.$el);
                // 在这里你可以做一些后续操作，比如跳转到其他页面，发送统计数据等
            }
        })
    </script>
</body>
</html>
